<template>
  <div>
    <div class="main_data_area">
      <!-- 操作 -->
      <div class="op_btns">
        <el-button type="primary" plain size="small" @click="selectMainTableData" v-show="getIconsStatus">刷新表格</el-button>
        <el-button type="primary" plain size="small" @click="showAddIconDialog">新增字体图标</el-button>
        <el-button type="danger" plain size="small" @click="batchDeleteIcons" v-show="deleteIconsStatus">批量删除</el-button>
      </div>
      <el-table :data="mainTable.data" @selection-change="mainTableSelectChangeHandle" size="small" highlight-current-row
        border stripe>
        <template slot="empty">
          <el-empty description="还未添加一个字体图标"></el-empty>
        </template>
        <!-- 复选列 -->
        <el-table-column type="selection"></el-table-column>
        <!-- 序号列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <!-- 展开列 -->
        <el-table-column type="expand" label="详情">
          <template slot-scope="{row}">
            <el-descriptions :title="row.name" :column="1" border size="small">
              <el-descriptions-item :label="col.label" v-for="col in mainTable.expandColumns" :key="col.id">
                <span>{{ row[col.prop] }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <!-- 动态列 -->
        <el-table-column :label="col.label" :prop="col.prop" v-for="col in mainTable.columns" :key="col.id">
        </el-table-column>
        <!-- 特殊处理列 -->
        <el-table-column label="字体图标样式">
          <template slot-scope="{row}">
            <i :class="row.iconClass"></i>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" min-width="60px">
          <template slot-scope="{row}">
            <el-button type="primary" plain size="small" @click="showEditIconDialog(row)"
              v-show="getIconStatus">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="padding:10px; display: flex; justify-content:space-around; ">
        <el-pagination hide-on-single-page layout="total, sizes, prev, pager, next, jumper" next-text="下一页"
          prev-text="上一页" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="mainTable.page.currentPage" :page-size="mainTable.page.pageSize" :total="mainTable.page.total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增图标 -->
    <div>
      <el-dialog append-to-body title="新增字体图标" :visible="mainTable.add.visible" width="30%" :before-close="hideAddDialog">
        <el-form :model="mainTable.add.data" label-width="100px" ref="addIconFormRef" label-position="left" size="small">
          <el-form-item label="字体图标类名" prop="iconClass">
            <el-input :prefix-icon="mainTable.add.data.iconClass" v-model="mainTable.add.data.iconClass"
              placeholder="输入字体图标类名" clearable></el-input>
          </el-form-item>
          <el-form-item label="字体图标名称" prop="label">
            <el-input v-model="mainTable.add.data.label" placeholder="输入字体图标名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="字体图标描述" prop="description">
            <el-input type="textarea" v-model="mainTable.add.data.description" placeholder="输入字体图标描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="hideAddDialog">取消</el-button>
            <el-button @click="resetAddIconForm">重置</el-button>
            <el-button type="primary" @click="submitAddIcon" v-show="addIconStatus">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 编辑图标 -->
    <div>
      <el-dialog append-to-body title="编辑字体图标" :visible="mainTable.edit.visible" width="30%"
        :before-close="hideEditDialog">
        <el-form label-width="100px" label-position="left" size="small">
          <el-form-item label="字体图标类名" prop="iconClass">
            <el-input :prefix-icon="mainTable.edit.data.iconClass" v-model="mainTable.edit.data.iconClass"
              placeholder="输入字体图标类名" clearable></el-input>
          </el-form-item>
          <el-form-item label="字体图标名称" prop="label">
            <el-input v-model="mainTable.edit.data.label" placeholder="输入字体图标名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="字体图标描述" prop="description">
            <el-input type="textarea" v-model="mainTable.edit.data.description" placeholder="输入字体图标描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="hideEditDialog">取消</el-button>
            <el-button type="primary" @click="submitEditIcon" v-show="editIconStatus">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      mainTable: {
        // 表格数据
        data: [],
        // 选中数据
        selectedData: [],
        // 分页
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        // 搜索
        search: {
          label: '',
          iconClass: '',
          description: '',
        },
        // 动态列
        columns: [
          {
            prop: 'iconClass',
            label: '字体图标类',
            minWidth: '60px',
          },
          {
            prop: 'label',
            label: '名称',
            minWidth: '60px',
          },
        ],
        // 展开列
        expandColumns: [
          {
            prop: 'id',
            label: 'ID',
          },
          {
            prop: 'description',
            label: '描述',
          },
          {
            prop: 'creatorName',
            label: '创建者',
          },
          {
            prop: 'createAt',
            label: '创建时间',
          },
          {
            prop: 'updaterName',
            label: '更新者',
          },
          {
            prop: 'updateAt',
            label: '更新时间',
          },
        ],
        // 新增部分
        add: {
          // 对话框可见性
          visible: false,
          // 表单绑定数据
          data: {
            label: "",
            description: "",
            iconClass: "",
          },
        },
        // 编辑部分
        edit: {
          // 对话框可见性
          visible: false,
          // 表单绑定数据
          data: {
            id: 0,
            label: "",
            description: "",
            iconClass: "",
          },
        },
      },
    }
  },

  computed: {
    // 借助mapGetters生成计算属性：uiAuthValidateIsNotNeeded、iconfontAuths
    ...mapGetters('uiAuthModule', ['uiAuthValidateIsNotNeeded', 'iconfontAuths']),
    // 各个操作可用性计算属性
    addIconStatus() {
      const { addIcon: { finalStatus } } = this.iconfontAuths
      return this.uiAuthValidateIsNotNeeded || finalStatus
    },
    getIconStatus() {
      const { getIcon: { finalStatus } } = this.iconfontAuths
      return this.uiAuthValidateIsNotNeeded || finalStatus
    },
    deleteIconsStatus() {
      const { deleteIcons: { finalStatus } } = this.iconfontAuths
      return this.uiAuthValidateIsNotNeeded || finalStatus
    },
    editIconStatus() {
      const { editIcon: { finalStatus } } = this.iconfontAuths
      return this.uiAuthValidateIsNotNeeded || finalStatus
    },
    getIconsStatus() {
      const { getIcons: { finalStatus } } = this.iconfontAuths
      return this.uiAuthValidateIsNotNeeded || finalStatus
    },
  },

  methods: {
    //#region 主表方法开始
    // 复选改变
    mainTableSelectChangeHandle(selection) {
      this.mainTable.selectedData = selection
    },
    // 分页改变
    handleSizeChange(pageSize) {
      this.mainTable.page.pageSize = pageSize
      this.selectMainTableData()
    },
    handleCurrentChange(currentPage) {
      this.mainTable.page.currentPage = currentPage
      this.selectMainTableData()
    },
    // 获取主表数据
    async selectMainTableData() {
      try {
        const page = this.mainTable.page
        const { data: res } = await this.$axios({
          url: `/admin/iconfont/selectList/${page.currentPage}/${page.pageSize}`,
          method: 'post',
          data: this.mainTable.search
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.mainTable.data = res.data.data
        this.mainTable.page.total = res.data.total
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 批量删除
    async batchDeleteIcons() {
      const ids = this.mainTable.selectedData.map(item => item.id)
      if (ids.length <= 0) {
        return this.$message.info(`请选择要删除的字体图标`)
      }
      try {
        const { data: res } = await this.$axios({
          url: `/admin/iconfont/batchDeleteIconFonts`,
          method: 'delete',
          data: ids
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(`已删除 ${res.data} 条字体图标记录`)
        this.mainTable.page.currentPage = 1
        this.selectMainTableData()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    //#endregion 主表方法结束

    //#region 添加图标方法开始
    // 显示新增对话框
    showAddIconDialog() {
      this.mainTable.add.visible = true
    },
    // 隐藏新增对话框
    hideAddDialog() {
      this.mainTable.add.visible = false
    },
    // 重置新增表单
    resetAddIconForm() {
      this.$refs.addIconFormRef.resetFields()
    },
    // 提交新增请求
    async submitAddIcon() {
      try {
        const { data: res } = await this.$axios({
          url: `/admin/iconfont/addIconFont`,
          method: 'post',
          data: this.mainTable.add.data
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(res.msg)
        this.selectMainTableData()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    //#endregion 添加图标方法结束

    //#region 编辑图标方法开始
    // 查询编辑数据
    async getIconById(iconfont) {
      try {
        const { data: res } = await this.$axios({
          url: `/admin/iconfont/getIconFont/${iconfont.id}`,
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.mainTable.edit.data = res.data
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    // 显示编辑对话框，并初始化编辑数据
    showEditIconDialog(iconfont) {
      this.getIconById(iconfont)
      this.mainTable.edit.visible = true
    },
    // 隐藏编辑对话框
    hideEditDialog() {
      this.mainTable.edit.visible = false
    },
    // 提交编辑请求
    async submitEditIcon() {
      try {
        const { data: res } = await this.$axios({
          url: `/admin/iconfont/editIconFont`,
          method: 'put',
          data: this.mainTable.edit.data
        })
        if (res.code === 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(res.msg)
        this.selectMainTableData()
        this.hideEditDialog()
      } catch (e) {
        this.$message.error(e.response.data.error)
      }
    },
    //#endregion 编辑图标方法结束

  },

  mounted() {
    // 如果具有获取字体图标列表的权限
    if (this.getIconsStatus) {
      this.selectMainTableData()
    }
  },
}
</script>

<style lang="less" scoped>
.main_data_area {
  .op_btns {
    display: flex;
    justify-content: start;
    padding: 0 0 10px 0;
  }
}
</style>